<template>
  <div class="app-container">
    <!-- 管家新增 -->
    <h5 class="titleInfo">
      打款
    </h5>
    <el-form ref="form"  :rules="rules" :inline="true" :model="form" label-width="130px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="姓名">
            {{list.realname}}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="角色">
            {{list.roleName}}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="电话号码">
            {{list.username}}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="打款银行卡">
            <!-- <div :class="{active : index == isActive}" v-for="(item,index) in list.bankCardList" :key="item.index"
              @click="chooseCard(item,index)">
              {{item.name}}-{{item.card}}
            </div> -->
            <el-select v-model="form.cardId" placeholder="请选择">
              <el-option v-for="(item,index) in resDatas" :key="item.index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="奖金">
            {{list.reward}}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="打款金额" prop="amount">
            <el-input v-model="form.amount" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="reamrk">
            <el-input type="textarea" v-model="form.reamrk" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button style="margin-top:30px;margin-left:130px" type="primary" @click="submitFn('form')">立即提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { monthMoneyFSMDetails, monthMoneyFSMAdd } from "@/api/financialSenior";
export default {
  name: "monthMoneyFSM",
  data() {
    return {
      list: {},
      isActive:-1,
      form: {
        id: null,
        amount: null,
        cardId: null,
        reamrk: ""
      },
      rules: {
        amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
        reamrk: [{ required: true, message: "请填写备注", trigger: "blur" }]
      },
      resDatas:[]
    };
  },
  created(){
    this.id = Number(this.$route.query.id);
    this.form.id = this.id;
    this.getDetails(this.id);
  },
  mounted() {
    
  },
  methods: {
    // 获取打款详情
    getDetails(id) {
      // 分公司列表
      let datas = { id: id };
      monthMoneyFSMDetails(datas)
        .then(res => {
          if (res.data.data) {
            this.list = res.data.data;
            if (this.list.bankCardList.length > 0) {
              this.list.bankCardList.forEach(item => {
                item.isActive = -1;
                this.resDatas.push({
                    value:item.cardId,
                    label:item.name+"-"+item.card
                })
              });
            }
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    chooseCard(infor,index) { 
      this.form.cardId = infor.cardId;
      this.isActive = index
    },
    // 提交
    submitFn(e) {
      console.log(this.form)
      this.$refs[e].validate(valid => {
        if (valid) {
          if(!this.form.cardId){
             this.$message({
            message: "请先选择打款银行卡",
            type: "warning"
          });
          return
          }
          let datas = this.form;
          monthMoneyFSMAdd(datas)
            .then(res => {
              if (!res.data.code) {
                this.$message({
                  message: "打款成功",
                  type: "success"
                });
                this.$router.push("/MonthMoneyFSIndex");
                this.reload();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(error => {
              this.$message.error(error);
            });
        } else {
          this.$message({
            message: "必填项不能为空",
            type: "warning"
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.active{
  color: #409EFF;
}
.app-container {
  padding: 0px !important;
}
.form {
  margin-left: 268px;
}
</style>
